<template>
    <div class="musiclistBox">
        <div class="musiclistBox-top">

            <div class="musiclistBox-top-left">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jinriqianggou"></use>
                </svg>
                <p>黑胶最高享五折！ 抽迪士尼好礼</p>


            </div>

            <span class="musiclistBox-top-right">点击抢购 ></span>

        </div>
        <div class="play">
            <div class="play-left">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang1"></use>
                </svg>
                <p>播放全部 ({{ musiclist.length }})</p>


            </div>
            <div class="play-right">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-24gf-playlist"></use>
                </svg>
            </div>

        </div>
        <div class="item"  v-for="(item, index) in musiclist.slice(0,20)" :key="item.id">
            <div class="item-left">
                <span>{{ index+1 }}</span>
                <div class="content">
                    <p class="name">{{ item.name }}</p>
                    <p class="author" >
                        <span v-for="(item1, info) in item.ar" :key="info">{{ item1.name }}</span>
                    </p>
                    <p class="user"> <img :src="item.al.picUrl" alt=""></p>
                </div>

            </div>
            <div class="item-right">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-w_shipin"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gengduo-shuxiang"></use>
                </svg>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
const props = defineProps(['musiclist'])


</script>
<style scoped lang="scss">
.musiclistBox {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    top: 5.2rem;
    overflow-y: scroll;
    border-radius: .2rem .2rem 0 0;
    background-color: var(--totalbackc);

    >.musiclistBox-top {
        width: 100%;
        box-sizing: border-box;
        padding: 0 .22rem;
        height: .8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #eee8e7;



        >.musiclistBox-top-left {
            width: 4.08rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .24rem;

            >.icon {
                width: .36rem;
                height: .36rem;
            }

        }

        >.musiclistBox-top-right {

            display: block;
            font-size: .24rem;
            color: #9c9897;
            line-height: .24rem;

        }

    }

    >.play {
        width: 100%;
        height: .72rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: .28rem .32rem 0 .22rem;

        >.play-left {
            >.icon {
                width: .44rem;
                height: .44rem;
                border-radius: 50%;
                overflow: hidden;
                box-sizing: border-box;
                padding: .08rem;
                background-color: #ea4a4a;
            }

            width: 2.44rem;
            height: .44rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .28rem;
        }

        >.play-right {
            width: .98rem;
            height: .44rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    >.item {
        width: 100%;
        height: .98rem;
        margin-top: .38rem;
        box-sizing: border-box;
        padding: 0 .44rem 0 .36rem;

        display: flex;
        justify-content: space-between;
        align-items: center;

        >.item-left {
            width: 5.9rem;
            height: 100%;

            >span {

                display: block;
                width: .46rem;
                float: left;
                line-height: .98rem;
                font-size: .24rem;
                

            }
            >.content{
                float: left;
                overflow: hidden;
                width: 250px;
                
                >.name{
                font-size: .3rem;
                overflow: hidden;
                white-space:nowrap
                
                
            }
            >.author{
                font-size: .24rem;
                overflow: hidden;
           
                >span{
                    
                    float: left;
                    margin-right: .08rem;
                    
                }
            }
            >.user{
                font-size: .24rem;
                overflow: hidden;
                >img{
                    display: block;
                    width: .24rem;
                    height: .24rem;
                    border-radius: 50%;
                    overflow:hidden ;
                    float: left;
                   
                }
            }

            }
            
        }

        >.item-right {
            width: .86rem;

            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .icon {

                height: .36rem;
            }
        }
    }

}
</style>